<template>
	<view>
		<uni-popup ref="popupDialog">
			<view class="popup-bd">
				<view class="popup-title">
					选择成员
					<uni-icons
						type="closeempty"
						size="50rpx"
						color="#666666"
						class="popup-close"
						@click="complete"
					></uni-icons>
				</view>
				<view class="searchBar"
					><uni-search-bar
						v-model="searchVal"
						placeholder="搜索"
						@confirm="inputSearch"
						@cancel="searchVal = ''"
						v-if="showSearch"
					></uni-search-bar
				></view>
				<view class="popup-content">
					<view class="selectedList f28">
						<text>已选中 {{ ids.length }} 人:</text>
						<view class="names">
							{{
								dataList
									.filter((d) => ids.includes(d.id))
									.map((item) => item.name)
									.join('、')
							}}
						</view>
					</view>
					<view class="pt20 pb20 pl20 pr20">
						<view class="userListWrapper">
							<view
								class="item"
								@click="chooseRelation(item)"
								v-for="(item, index) in dataList.filter(
									(_item) => _item.name.includes(searchVal)
								)"
								:key="index"
							>
								<uni-icons
									v-if="ids.includes(item.id)"
									type="checkbox"
									size="20"
									color="#3A74FC"
								></uni-icons>
								<uni-icons
									v-else
									type="circle"
									size="20"
									color="#999999"
								></uni-icons>
								<view class="name">{{ item.name }}</view>
								<view
									v-if="`${item.id}` === checkedFixId"
									class="sub"
									>自己，创建者</view
								>
							</view>
						</view>
					</view>
				</view>
				<view class="popup-bottom df ac"
					><button
						class="primary-button linear w60"
						@click="complete"
					>
						确 定
					</button></view
				>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	emits: ['complete', 'search'],
	props: {
		userList: {
			type: Array,
			default() {
				return []
			},
		},
		checkedIds: {
			type: Array,
			default() {
				return []
			},
		},
		checkedFixId: {
			type: String,
			default: '',
		},
		showSearch: {
			type: Boolean,
			default: true,
		},
	},
	data() {
		return {
			dataList: [],
			chooseList: [],
			searchVal: '',
			ids: [],
		}
	},
	methods: {
		init() {
			this.searchVal = ''
			// 创建者排在第一位
			this.dataList = [
				...this.userList.filter(
					(item) => `${item.id}` === this.checkedFixId
				),
				...this.userList.filter(
					(item) => `${item.id}` !== this.checkedFixId
				),
			]
			this.ids = this.checkedIds
			this.$refs.popupDialog.open('bottom')
		},
		chooseRelation(item) {
			const id = item.id
			if (`${id}` === this.checkedFixId) return false
			if (this.ids.includes(id)) {
				this.ids = this.ids.filter((_id) => _id !== id)
			} else {
				this.ids = [...this.ids, id]
			}
		},
		complete() {
			this.$emit('complete', { checkedIds: this.ids })
			this.$refs.popupDialog.close()
		},
		//输入搜索
		inputSearch(event) {
			this.searchVal = event.value
		},
	},
}
</script>

<style scoped lang="scss">
.searchBar {
	position: absolute;
	top: 100rpx;
	left: 0;
	right: 0;
	background-color: #ffffff;
	z-index: 2;
}
.popup-content {
	box-sizing: border-box;
	padding-top: 100rpx;
	padding-bottom: 0;
	.selectedList {
		position: sticky;
		top: 0;
		padding: 10rpx;
		display: flex;
		gap: 10rpx;
		background: #ffffff;
		.names {
			flex: 1;
		}
	}
}
.userListWrapper {
	display: flex;
	flex-direction: column;
	gap: 30rpx;
	line-height: 60rpx;
	.item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 20rpx;
		font-size: 32rpx;
		.name {
			flex: 1;
		}
		.sub {
			font-size: 28rpx;
			color: #999999;
		}
	}
}
.popup-title {
	background: linear-gradient(90deg, #e3edff 0%, rgba(223, 234, 255, 0) 100%);
}
</style>
